<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <link rel="stylesheet" href="../../../sourceEditor/examples/css/railView.css" type="text/css" />
</head>
<body>
    <div id="buttom-container">
        <button class="button" onclick="handleOpen(point)">点绘制</button>
        <button class="button" onclick="handleOpen(line)">线绘制</button>
        <button class="button" onclick="handleOpen(polygon)">面绘制</button>
        <button class="button" onclick="handleOpen(coord)">坐标绘制</button>
    </div>
    <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
    <div id="point" class="oprate-container" style="display: none">
        <div class="head">
            <span>点绘制设置</span>
            <span onclick="hideModel(point)" style="cursor: pointer">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>颜色：</span>
                <input type="color" name="" value="#e6e6e6" id="pointColor">
            </div>
            <div class="oprate-item">
                <span>点大小：</span>
                <input id="pointSize" value="2" class="input">
            </div>
            <!-- <div class="oprate-item">
                结束方式：
                <input type="radio" name="end" value="1" checked='checked' onclick="getRadioVal()">双击
                <input type="radio" name="end" value="2" onclick="getRadioVal()">右键
            </div> -->
            <div class="oprate-item btnGroup">
                <button onclick="handleSavePoint()">保存设置</button>
                <button onclick="handleActivate()">激活绘制</button>
                <button onclick="handleCancel()">取消绘制</button>
                <button onclick="handleEmpty()" >清空绘制</button>
            </div>
        </div>
    </div>
    <div id="line" class="oprate-container" style="display: none">
        <div class="head">
            <span>线绘制设置</span>
            <span onclick="hideModel(line)" style="cursor: pointer">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>颜色：</span>
                <input type="color" name="" value="#e6e6e6" id="lineColor">
            </div>
            <div class="oprate-item">
                <span>线宽：</span>
                <input id="lineWidth" value="2" class="input">
            </div>
            <div class="oprate-item">
                <span>线箭头设置：</span>
                <select id="setArrow">
                    <option value="false">无</option>
                    <option value="true">有</option>
                </select>
            </div>
            <div class="oprate-item">
                <span>箭头大小：</span>
                <input id="arrowSize" value="2" class="input">
            </div>
            <div class="oprate-item">
                <span style="max-width: 330px;color: #999999;font-size: 14px;">*箭头大小会受到线宽影响，如果线与箭头大小同步只需改线宽，箭头大小微调</span>
            </div>
            <div class="oprate-item btnGroup">
                <button onclick="handleSaveLine()">保存设置</button>
                <button onclick="handleActivate()">激活绘制</button>
                <button onclick="handleCancel()">取消绘制</button>
                <button onclick="handleEmpty()" >清空绘制</button>
            </div>
        </div>
    </div>
    <div id="polygon" class="oprate-container" style="display: none">
        <div class="head">
            <span>面绘制设置</span>
            <span onclick="hideModel(polygon)" style="cursor: pointer">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>颜色：</span>
                <input type="color" name="" value="#e6e6e6" id="polygonColor">
            </div>
            <div class="oprate-item">
                <span>线宽：</span>
                <input id="polygonLine" value="2" class="input">
            </div>
            <div class="oprate-item btnGroup">
                <button onclick="handleSavePolygon()">保存设置</button>
                <button onclick="handleActivate()">激活绘制</button>
                <button onclick="handleCancel()">取消绘制</button>
                <button onclick="handleEmpty()" >清空绘制</button>
            </div>
        </div>
    </div>
    <script id="viewerStartup">
        let model;
        window.onload = function () {
            let proleft = new CarsView("left", 'csr', exampleModelId, callbackleft, {
                isShowAxis: true
            });
            proleft.then(function (value) {
                model = value;
            });
        }
        function callbackleft(nodeNames, nodeIds, position, center, normal) {}
        function handleOpen(model) {
            model.style.display = 'inline-block';
        }
        let endMode = 1; // 结束方式
        function getRadioVal() {
            let end = document.getElementsByName('end');
            for(i=0; i<end.length;i++)  {
                if(end[i].checked)  {
                    console.log(`你选择了：${end[i].value}`);
                    endMode = Number(end[i].value)
                }
            }
        }
        function handleSavePoint() {
            const hex = document.getElementById('pointColor').value;
            const red = Number('0x' + hex.substring(1, 3));
            const green = Number('0x' + hex.substring(3, 5));
            const blue = Number('0x' + hex.substring(5, 7));
            let color = {r: red, g: green, b: blue}; // 颜色
            model.setDrawing('point', {
                color: color,
                pointSize: pointSize,
            });
        }
        function handleSaveLine() {
            const hex = document.getElementById('lineColor').value;
            const red = Number('0x' + hex.substring(1, 3));
            const green = Number('0x' + hex.substring(3, 5));
            const blue = Number('0x' + hex.substring(5, 7));
            let color = {r: red, g: green, b: blue}; // 颜色
            let lineWidth = Number(document.getElementById('lineWidth').value); // 线宽
            let setArrow = Boolean(document.getElementById("setArrow").value); // 线箭头设置
            let arrowSize = Number(document.getElementById("arrowSize").value); // 箭头大小
            model.setDrawing('line', {
                color: color,
                lineWidth: lineWidth,
                hasArrow: setArrow,
                arrowSize: arrowSize
            });
        }
        function handleSavePolygon() {
            const hex = document.getElementById('polygonColor').value;
            const red = Number('0x' + hex.substring(1, 3));
            const green = Number('0x' + hex.substring(3, 5));
            const blue = Number('0x' + hex.substring(5, 7));
            let color = {r: red, g: green, b: blue}; // 颜色
            let lineWidth = Number(document.getElementById('polygonLine').value); // 线宽
            model.setDrawing('polygon', {
                color: color,
                lineWidth: lineWidth,
            });
        }
        function handleActivate() {
            model.acactivationDrawing()
        }
        function handleCancel() {
            model.deactiveDrawing()
        }
        function handleEmpty() {
            // document.getElementById('color').value = "";
            // document.getElementById('lineWidth').value = "";
            // document.getElementsByName('end')[0].checked;
            // document.getElementById('methods').value = "line";
            // document.getElementById('pointSize').value = "2";
            // document.getElementById('setArrow').value = "false";
            // document.getElementById('arrowSize').value = "";
        }
        function hideModel(model) {
            model.style.display = 'none';
        }
    </script>
</body>
</html>
